<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 80vw;
            height: 80vh;
            background-color: #0f0f0f;
        }
    </style>
</head>
<body>
    <p>移动端事件</p>
    <div class="div1"></div>

    <script>
        // 事件的封装
        // 点击事件叫  aaa151
        var div = document.querySelector('.div1');

        // 开始封装事件
        var touchEvent = {
            time: '2023-01-31',// 这是对象的属性，后面两个是方法
            'aaa151': function (el, fn) {
                // el 执行事件的元素   fn 处理函数
                // 一个起始位置一个结束位置 两个位置距离很近 就叫点击  距离很远就叫拖拽
                var startX, startY, endX, endY;
                el.addEventListener('touchstart', function(e) {
                    startX = e.touches[0].clientX;
                    startY = e.touches[0].clientY;
                })
                el.addEventListener('touchend', function(e) {
                    endX = e.changedTouches[0].clientX;
                    endY = e.changedTouches[0].clientY;
                    // 事件结束时判断是否拖拽
                    if(Math.abs(startX-endX)<10 && Math.abs(startY-endY)<10) {
                        // 轻触事件
                        fn()
                    }
                })
            },
            'long151': function() {
                
            }
        };

        touchEvent.aaa151(div, function() {
            console.log('aaa151---111111');
        })        
    </script>
</body>
</html>